<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-row under-line")
                div(class="flex-row-item flex-center-center h3 flex-2") 机器设置
                div(class="flex-row-item") {{activeId+1}}/{{menus.length}}
            div(class="flex-column-item flex-center" v-for="menu in currentPageMenus",
            :class="{'selected-text': menu.id == activeId ? true: false}") {{menu.name}}
        control-password(:visible="visible",ref="controlPsw",@submit="submit")
        control-dialog(:visible="dialogVisible", ref="dialog",title="密码错误", sub-title="按任意键返回！")
</template>

<script>
    import MenuList from "@/mixins/MenuList";

    export default {
        mixins: [MenuList],
        data() {
            return {
                page: {maxResultCount: 3, skipCount: 0},
                visible: false,
                dialogVisible: false
            };
        },
        computed: {
            menus() {
                var menus = [
                    {name: "1.时间设置", id: 0, to: "time"},
                    {name: "2.警示设置", id: 1, to: "warning"},
                    {name: "3.蓝牙设置", id: 2, to: "bluetooth"},
                    {name: "4.显示设置", id: 3, to: "display"},
                    {name: "5.动态血糖仪设置", id: 4, to: "boolMachine"},
                    {name: "6.恢复出厂值设置", id: 5, reset: true}
                ];
                return menus;
            },
            currentPageMenus() {
                var start = this.skipCount;
                var end = this.skipCount + this.page.maxResultCount;
                return this.menus.slice(start, end);
            }
        },
        methods: {
            up() {
                if (this.visible) {
                    this.$refs.controlPsw.up();
                    return;
                }
                if (this.dialogVisible) {
                    this.dialogVisible = false;
                    return;
                }

                if (this.activeId == 0) {
                    this.activeId = this.menus[this.menus.length - 1].id;
                } else {
                    this.activeId = this.activeId - 1;
                }
            },
            down() {
                if (this.visible) {
                    this.$refs.controlPsw.down();
                    return;
                }
                if (this.dialogVisible) {
                    this.dialogVisible = false;
                    return;
                }

                if (this.activeId == this.menus[this.menus.length - 1].id) {
                    this.activeId = 0;
                } else {
                    this.activeId = this.activeId + 1;
                }
            },

            back() {
                if (this.dialogVisible) {
                    this.dialogVisible = false;
                    return;
                }
                if (this.visible) {
                    this.visible = !this.visible;
                } else {
                    this.$router.push("/menu?index=4");
                }
            },
            yes() {
                if (this.visible) {
                    this.$refs.controlPsw.yes();
                    return;
                }
                if (this.dialogVisible) {
                    this.dialogVisible = false;
                    return;
                }

                if (this.activeId == 5) {
                    this.visible = true;
                    return;
                }

                var active = this.menus.find(menu => {
                    return menu.id == this.activeId;
                });
                if (active.showModal) {
                    this.visible = true;
                } else {
                    this.$router.push(active.to);
                }
            },
            submit(password) {
                if (password == '1000') {
                    location.href = "/"; // 直接跳转刷新就是初始化了
                } else {
                    this.visible = false;
                    this.dialogVisible = true;
                }
            }
        }
    };
</script>

<style lang="less">
</style>
